{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>
  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide > a > img {
    width: 100%;
  }

  .swiper-slide > img {
    width: 100%;
  }

  .swiper-pagination .swiper-pagination-bullet {
    background: rgba(10, 10, 10, .2);
    opacity: 1.0;
    border-radius: 2px;
    width: 40px;
    height: 2px;
  }

  .swiper-pagination .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }

  .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 3px;
  }

  .swiper-container2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  .swiper-container2 > .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-container2 > .swiper-slide > img {
    width: 100%;
  }

  .swiper-pagination2 {
    position: absolute;
    width: 100%;
    z-index: 1;
    text-align: right;
    padding-right: 10px;
    bottom: 5px !important;
  }

  .swiper-pagination2 .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .5);
    opacity: 1.0;
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .swiper-pagination2 .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }

  .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 3px;
  }

  .swiper-container3 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  .swiper-pagination3 {
    position: absolute;
    width: 100%;
    z-index: 1;
    text-align: center;
    bottom: 5px !important;
    padding-bottom: 50px !important;
  }

  .swiper-pagination3 .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .5);
    opacity: 1.0;
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .swiper-pagination3 .swiper-pagination-bullet-active {
    background: #FFFFFF;
  }

  .swiper-pagination2 {
    padding-bottom: 95px !important;
  }

</style>
{/block}
{block name="main"}
<div class="container-fluid">
  <div class="d-flex flex-column">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="{$Request.root}/activities/act202201.html?utm_source=官网首页活动轮播"><img alt="" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202201/h5/mj_yd_01.jpg"></a>
        </div>
        <div class="swiper-slide">
          <img alt="" onclick="location.href='./esthetics.html'" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/banner1.png">
        </div>
        <div class="swiper-slide">
          <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/banner2.png">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

  <div class="d-flex flex-column">
    <div class="row" style="margin-top: 15px;padding: 10px 25px">
      <div onclick="location.href='{$Request.root}/esthetics.html'" class="col-3" style="display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0">
        <img alt="" style="width: 65%; margin-bottom: 5px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/zp.png">
        <div style="font-size: .95rem; text-align: center">整体软装</div>
      </div>
      <div onclick="location.href='{$Request.root}/cases.html'"  class="col-3" style="display: flex; flex-direction: column; align-items: center; padding: 0">
        <img alt="" style="width: 65%; margin-bottom: 5px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/al.png">
        <div style="font-size: .95rem; text-align: center">实景案例</div>
      </div>
      <div onclick="location.href='{$Request.root}/building.html'"  class="col-3" style="display: flex; flex-direction: column; align-items: center; padding: 0">
        <img alt="" style="width: 65%; margin-bottom: 5px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/tg.png">
        <div style="font-size: .95rem; text-align: center">楼盘团购</div>
      </div>
      <div onclick="location.href='{$Request.root}/baike.html'"  class="col-3" style="display: flex; flex-direction: column; align-items: center; padding: 0">
        <img alt="" style="width: 65%; margin-bottom: 5px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/bk.png">
        <div style="font-size: .95rem; text-align: center">软装百科</div>
      </div>
    </div>
  </div>

  <div id="product" style="height: 10px"></div>
  <div class="d-flex flex-column">
    <img alt="全屋整体软装产品体系" class="mx-auto" style="width: 50%;margin-top: 10px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/title1.png">
    <div class="row" style="margin-top: 15px;padding: 0 10px">
      <div class="col-6" style="margin-top: 10px;padding-right: 5px">
        <img alt="" onclick="location.href='{$Request.root}/customization.html'" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/dz.png">
      </div>
      <div class="col-6" style="margin-top: 10px;padding-left: 5px">
        <img alt="" onclick="location.href='{$Request.root}/furniture.html'" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/jj.png">
      </div>
      <div class="col-6" style="margin-top: 10px;padding-right: 5px">
        <img alt="" onclick="location.href='{$Request.root}/curtain.html'" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/clrs.png">
      </div>
      <div class="col-6" style="margin-top: 10px;padding-left: 5px">
        <img alt="" onclick="location.href='{$Request.root}/reform.html'" style="width: 100%" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/jzgz.png">
      </div>
    </div>
  </div>

  <div class="d-flex flex-column" style="position: relative; margin-top: 30px; padding-bottom:30px;background-image: url('https://res.bestyoujia.com/web/ZMYJ/index/mobile/zp_bg.png');background-size: cover">
    <img alt="" class="mx-auto" style="width: 60%;margin: 6% 0" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/title2.png">
    <div style="margin: 0 10px">
      <div class="swiper-container2">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/zp1.png">
          </div>
          <div class="swiper-slide">
            <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/zp2.png">
          </div>
          <div class="swiper-slide">
            <img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/zp3.png">
          </div>
        </div>
        <div class="swiper-pagination2" style="padding-top: 90px"></div>
      </div>
    </div>
    <img alt="" onclick="window.page_position='首页-预约设计方案'" class="mx-auto appointment-box" style="position: absolute; z-index: 10; right: 8px;width: 32%;bottom: 30px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/zp_yy.png">
  </div>

  <div class="d-flex flex-column">
    <img alt="" class="mx-auto" style="width: 35%;margin: 30px 0 20px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/title3.png">
    <div class="swiper-container3">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="{$Request.root}/case/169.html"><img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/eg1.png"></a>
        </div>
        <div class="swiper-slide">
          <a href="{$Request.root}/case/125.html"><img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/eg2.png"></a>
        </div>
        <div class="swiper-slide">
          <a href="{$Request.root}/case/126.html"><img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/eg3.png"></a>
        </div>
        <div class="swiper-slide">
          <a href="{$Request.root}/case/170.html"><img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/eg4.png"></a>
        </div>
        <div class="swiper-slide">
          <a href="{$Request.root}/case/171.html"><img alt="" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/eg5.png"></a>
        </div>
      </div>
      <div class="swiper-pagination3"></div>
    </div>
    <img alt="" onclick="location.href='{$Request.root}/cases.html'" class="mx-auto" style="width: 30%;margin: 20px 0 10px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/eg_more.png">
  </div>

  <div class="d-flex flex-column" style="padding-top: 30px">

    <div style="position: relative">
      <img alt="" style="width: 100%;" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/fwtx.png">
      <div onclick="location.href='{$Request.root}/esthetics.html'" style="width: fit-content;
    background: #93412C;
    color: #ffffff;
    padding: 6px 20px;
    position: absolute;
    bottom: 25px;
    min-width: 120px;
    left: 38%;
    font-size: 15px;">探索更多 ></div>
    </div>
    <img alt="" onclick="location.href='{$Request.root}/esthetics.html'" class="mx-auto" style="width: 94%;margin-top: 35px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/f2c.png">
  </div>

  <div class="d-flex flex-column" style="padding-top: 30px">
    <img alt="" class="mx-auto" style="width: 94%;margin: 5px 0 20px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/zy.png">
  </div>

  <div class="m-t-5 d-flex flex-column" style="background: #93412C;padding-bottom: 2rem">
    <img alt="" class="mx-auto" style="width: 30%;margin-top: 30px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/title8.png">
    <img alt="" class="mx-auto" style="width: 95%;margin-top: 30px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/aboutus.png">
    <img alt="" class="mx-auto" style="width: 30%;margin-top: 20px" src="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/logo-white.png">
    <div style="margin-top: 20px;
    color: #ffffff;
    padding: 0 12px;
    font-size: 14px;
    line-height: 30px;">
成都致美筑家家居装饰有限公司，简称致美优家，秉承着兄弟品牌U家工场为极致服务体验而生的理念，率先提出精装房美学整配的概念，致力于解决当下精装房业主家居消费服务体验过程中的诸多痛点。<br/>
成立专注于服务精装房全屋家居团队，囊括顾问、规划师、定制设计师、交付管家等；同时期1600㎡的美学体验馆对外开放，经过两年时间发展，已成为成都精装房市场的领导品牌。2020.12.12全新1100㎡家居生活体验馆在富森美家居1号软装馆7楼盛大开业。<br/>
目前，致美优家已服务5000+成都精装房业主，提供全屋家居整体软装，实现从设计、精装改造，到定制柜体、成品家具、窗帘、灯具、软饰摆场，交付入住的一站式省心服务。
    </div>
    <img alt="" onclick="location.href='{$Request.root}/about.html'" class="mx-auto" style="width: 32%;margin-top: 25px" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/us_icon.png">
  </div>

  <div style="position: relative; margin: 0 auto">
    <a href="{$Request.root}/vr.html"><img alt="" style="width: 100%;" src="https://res.bestyoujia.com/web/ZMYJ/index/mobile/zt.png"></a>
  </div>

</div>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
<script>
    $('#nav').find('ul > li').eq(0).addClass('nav-active');
    $("#nav").scrollLeft(65*0);

    initWxShare('致美优家-专注成都精装房一站式美学整配服务', '致美优家，成都首家专注精装房一站式美学整配带的优质服务商');

    const swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        } ,
        autoplay: {
            delay: 4000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        paginationElement : 'li',
        paginationClickable: true,
        loop: true,
        autoplayDisableOnInteraction: false
    });

    const swiper2 = new Swiper('.swiper-container2', {
        pagination: {
            el: '.swiper-pagination2',
        },
        loop : true,
    });

    const swiper3 = new Swiper('.swiper-container3', {
      autoplay: {
        delay: 5000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
        pagination: {
            el: '.swiper-pagination3',
        },
        loop : true,
    });
</script>
{/block}